<link rel="stylesheet" href="<?php echo APP_TEMPLATES_URL;?>/css/checkbix.min.css" />
<link rel="stylesheet" href="<?php echo APP_TEMPLATES_URL;?>/css/public.css" />
<script src="<?php echo APP_TEMPLATES_URL;?>/js/checkbix.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL;?>/js/fileupload/jquery.iframe-transport.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL;?>/js/fileupload/jquery.ui.widget.js" charset="utf-8"></script>
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL;?>/js/fileupload/jquery.fileupload.js" charset="utf-8"></script>

<script type="text/javascript">
    Checkbix.init();
</script>
<script type="text/javascript">
    window.onload = function() {

        var oStar = document.getElementById("star");

        var aLi = oStar.getElementsByTagName("li");

        var oUl = oStar.getElementsByTagName("ul")[0];

        var oSpan = oStar.getElementsByTagName("span")[1];

        var oP = oStar.getElementsByTagName("p")[0];

        var i = iScore = iStar = 0;

        var aMsg = [

            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",

            "不满意|部分有破损，与卖家描述的不符，不满意",

            "一般|质量一般，没有卖家描述的那么好",

            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",

            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"

        ]

        for(i = 1; i <= aLi.length; i++) {

            aLi[i - 1].index = i;

            //鼠标移过显示分数

            aLi[i - 1].onmouseover = function() {

                fnPoint(this.index);

                //浮动层显示

                oP.style.display = "block";

                //计算浮动层位置

                oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";

                //匹配浮动层文字内容

                oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]

            };

            //鼠标离开后恢复上次评分

            aLi[i - 1].onmouseout = function() {

                fnPoint();

                //关闭浮动层

                oP.style.display = "none"

            };

            //点击后进行评分处理

            aLi[i - 1].onclick = function() {

                iStar = this.index;

                oP.style.display = "none";

                oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"

            }

        }

        //评分处理

        function fnPoint(iArg) {

            //分数赋值
            $('#goods_score').val(iArg);
            iScore = iArg || iStar;

            for(i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";

        }

    };
</script>
<script type="text/javascript">
    var imgurl = "";
    function urluri(node,number){
        $thii = $(node);
        var tpstr = $thii.val();
        var arr=tpstr.split('\\');//注split可以用字符或字符串分割
        var filename=arr[arr.length-1];//这就是要取得的图片名称
        //$("#imgfield").attr("src","images/" + filename);
        //$("#imgfield"+number).attr("src","templates/default/images/666.png");

        var imgURL = "";
        try{
            var file = null;
            if(node.files && node.files[0] ){
                file = node.files[0];
            }else if(node.files && node.files.item(0)) {
                file = node.files.item(0);
            }
            //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径  
            try{
                imgURL =  file.getAsDataURL();
            }catch(e){
                imgRUL = window.URL.createObjectURL(file);
            }
        }catch(e){
            if (node.files && node.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    imgURL = e.target.result;
                };
                reader.readAsDataURL(node.files[0]);
            }
        }

        $("#imgfield"+number).attr("src",imgRUL);

        return imgURL;

    }
</script>

<style type="text/css">
    /* star */

    #star {
        position: relative;
        width: 600px;
        margin: 20px auto;
        min-height: 24px;
        width: 100%;
        padding: 0 15px;
    }

    #star ul,
    #star span {
        float: left;
        display: inline;
        height: 19px;
        line-height: 19px;
    }

    #star ul {
        margin: 0 10px;
    }

    #star li {
        float: left;
        width: 24px;
        cursor: pointer;
        text-indent: -9999px;
        background: url(templates/default/images/star.png) no-repeat;
    }

    #star strong {
        color: #f60;
    }

    #star li.on {
        background-position: 0 -28px;
    }

    #star p {
        position: absolute;
        top: 20px;
        width: 159px;
        height: 60px;
        display: none;
        background: url(images/icon.gif) no-repeat;
        padding: 7px 10px 0;
    }

    #star p em {
        color: #f60;
        display: block;
        font-style: normal;
    }
</style>

<style>
    body,
    html {
        background: #F4F4F4 !important;
    }

    .indexm {
        display: none !important;
    }

    .mui-poppicker-header .mui-btn {
        font-size: 14px;
        padding: 5px 10px;
        background: #f0b33e;
        border: 0;
        width: 50%;
        height: 50px;
    }

    .mui-poppicker-header {
        padding: 0;
    }

    .toimga a {
        float: left;
        width: 25%;
        margin-top: 20px;
    }
    .toimga a> img {}
    .file {
        position: absolute;
        top: 0;
        right: 80px;
        height: 24px;
        filter: alpha(opacity: 0);
        opacity: 0;
        width: 260px
    }
    .xx{opacity: 0;display: none !important;}
</style>
<!-- 导航 -->
<div class="mui-bar mui-bar-nav bj">
    <button id="zhuce" class="mui-btn mui-btn-link mui-btn-nav mui-pull-left zys mui-action-back">
        <img style=" max-width: 70%; vertical-align: middle;" src="<?php echo APP_TEMPLATES_URL;?>/images/back.png" />
    </button>

    <h1 class="mui-title"><label style="font-size: 18px;vertical-align: middle; line-height: 44px;">商品评论</label></h1>
</div>
<!-- 主体内容 -->
<section style="background: #FFFFFF;">
    <form id="evalform" method="post" enctype="multipart/form-data" action="index.php?act=order&op=goods_comment&order_id=<?php echo $_GET['order_id'];?>">
        <input type="hidden" name="form_submit" value="ok" />
        <div style="padding: 10px; padding-bottom: 20px; border-bottom: 1px solid #DDDDDD;">
            <?php if(!empty($output['order_goods'])){?>
                <?php foreach($output['order_goods'] as $goods){?>
                    <table width="100%" cellspacing="" cellpadding="">
                        <tr>
                            <td style="width: 80px;">
                                <a href="index.php?act=goods&op=goods_detail&goods_id=<?php echo $goods['goods_id']; ?>" target="_blank"><img style="vertical-align: middle;width: 80px;" src="<?php echo $goods['goods_image_url']; ?>"/></a>
                                <dl class="goods-name">
                                    <dt><a href="index.php?act=goods&op=goods_detail&goods_id=<?php echo $goods['goods_id']; ?>" target="_blank" title="<?php echo $goods['goods_name'];?>"><?php echo $goods['goods_name'];?></a></dt>
                                    <dd title="<?php echo $goods['goods_spec'];?>"><?php echo $goods['goods_spec'];?></dd>
                                </dl>
                            </td>
                            <td style="vertical-align: top; height: 100px;"><textarea name="goods[<?php echo $goods['rec_id'];?>][comment]"  style="font-size: 14px;border: 0;width: 100%;height: 100%;" placeholder="请写下对产品的感受"></textarea></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <style>

                                    .toimga>a{
                                        width:100px;
                                        height:100px;
                                        line-height:100px;
                                        text-align:center;
                                        position:relative;
                                    }

                                    .toimga .file{
                                        width:100px;
                                        height:100px;
                                        top:0;left:0;
                                    }

                                    .upload_ready{
                                        background:url(<?php echo APP_TEMPLATES_URL;?>/images/9_07.png) top center no-repeat;
                                        background-size:100px 100px;
                                    }

                                    .toimga>a .closed span{
                                        background:rgba(0,0,0,0.8);color:#fff;
                                        position:absolute;
                                        right:0;
                                        top:0;
                                        width:50px;

                                    }

                                    .toimga>a .closed{
                                        display:none;
                                        width:100%;
                                        height:100%;
                                        position: absolute;
                                        top: 0;
                                        right: 0;
                                    }

                                    .toimga>a div{
                                        width:100%;
                                        height:100%;
                                        position: absolute;
                                        z-index:999;
                                        pointer:cursor;
                                    }

                                </style>
                                <div class="toimga">
                                    <a href="javascript:;" class="upload_ready">
                                        <input type="file" name="file" class="file" id="fileField1" size="28"/>
                                        <label for="fileField1"><img id="imgfield1" style="max-width:90%;vertical-align:middle;" src="" /></label>
                                        <div class="closed"><span>删除</span></div>
                                    </a>
                                    <a href="javascript:;" class="upload_ready">
                                        <input type="file" name="file" class="file" id="fileField2" size="28"/>
                                        <label for="fileField2"><img id="imgfield2" style="max-width:90%;vertical-align:middle;" src="" /></label>
                                        <div class="closed"><span>删除</span></div>
                                    </a>
                                    <a href="javascript:;" class="upload_ready">
                                        <input type="file" name="file" class="file" id="fileField3" size="28"/>
                                        <label for="fileField3"><img id="imgfield3" style="max-width:90%;vertical-align:middle;" src="" /></label>
                                        <div class="closed"><span>删除</span></div>
                                    </a>
                                    <input type="hidden" name="imgitem[0]" id="imgitem01" value=""/>
                                    <input type="hidden" name="imgitem[1]" id="imgitem02" value=""/>
                                    <input type="hidden" name="imgitem[2]" id="imgitem03" value=""/>
                                </div>
                            </td>
                        </tr>
                    </table>
                <?php }}?>
        </div>

        <div id="star">
            <span>商品评论</span>
            <ul>
                <li>
                    <a href="javascript:;">1</a>
                </li>
                <li>
                    <a href="javascript:;">2</a>
                </li>
                <li>
                    <a href="javascript:;">3</a>
                </li>
                <li>
                    <a href="javascript:;">4</a>
                </li>
                <li>
                    <a href="javascript:;">5</a>
                </li>
            </ul>
            <span class="xx"></span>
            <p class="xx"></p>
            <div style="clear: both;"></div>
        </div>
        <input nctype="score" id="goods_score" name="goods[<?php echo $goods['rec_id'];?>][score]" type="hidden">

        <div style="background: #F4F4F4;clear: both;height: 10px;"></div>
        <ul class="across">
            <li class="side">
                <div class="countone notone">
                    <a id="showUserPicker" href="#">
                        <label style="text-align: left; color: #999; width: 75px;">
                            <input id="mycheckbox3" type="checkbox" checked="checked" class="checkbix" data-shape="circled" name="goods[<?php echo $goods['rec_id'];?>][anony]" data-color="orange" data-text="匿名评价" value="1">
                        </label>
                    </a>
                </div>
            </li>
        </ul>
        <div style="background: #F4F4F4;clear: both;height: 10px;"></div>
    </form>
</section>

<style>
    .bigbtn {
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #000000;
        font-size: 16px;
        background: #f2b743;
        height: 50px;
        line-height: 50px;
        left: 0;
    }
</style>

<script>

    // 图片上传

    $('.toimga>a .closed').click(function(){

        $(this).hide();
        $(this).parent().find("img").attr("src","")
        $(this).parent().attr("class","upload_ready")
        var i = $(this).parent().index()+1
        $("#imgitem0"+i).val("")

    })
    $('#fileField1').fileupload({
        dataType: 'json',
        url: '<?php echo urlShop('sns_album', 'swfupload');?>',
        formData: '',
        add: function (e,data) {

            data.formData = {category_id:<?php echo $output['ac_id'];?>};
            data.submit();
        },
        done: function (e,data) {
            if(data.result.state == 'true') {
                $('#imgfield1').attr("src",data.result.file_url)
                $("#imgitem01").val(data.result.file_path);
                $(this).parent().removeClass("upload_ready")
                $(this).parent().find(".closed").show()
            } else {
                alert(data.result.message);
            }
        }
    });

    $('#fileField2').fileupload({
        dataType: 'json',
        url: '<?php echo urlShop('sns_album', 'swfupload');?>',
        formData: '',
        add: function (e,data) {

            data.formData = {category_id:<?php echo $output['ac_id'];?>};
            data.submit();
        },
        done: function (e,data) {
            if(data.result.state == 'true') {
                $('#imgfield2').attr("src",data.result.file_url)
                $("#imgitem02").val(data.result.file_path)
                $(this).parent().removeClass("upload_ready")
                $(this).parent().find(".closed").show()
            } else {
                alert(data.result.message);
            }
        }
    });

    $('#fileField3').fileupload({
        dataType: 'json',
        url: '<?php echo urlShop('sns_album', 'swfupload');?>',
        formData: '',
        add: function (e,data) {

            data.formData = {category_id:<?php echo $output['ac_id'];?>};
            data.submit();
        },
        done: function (e,data) {
            if(data.result.state == 'true') {
                $('#imgfield3').attr("src",data.result.file_url)
                $("#imgitem03").val(data.result.file_path)
                $(this).parent().removeClass("upload_ready")
                $(this).parent().find(".closed").show()
            } else {
                alert(data.result.message);
            }
        }
    });
</script>

<script type="text/javascript">

    <!--
    function submitComment(){
        $('#evalform').submit();
    }
    //-->
</script>
<a class="bigbtn" href="javascript:submitComment();">发表评论</a>